<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<script>

function doChangeCheckBox(){
	try{
		var checkboxObjs = document.getElementsByName("selectedTraineeId");
		for(var i=0;i<checkboxObjs.length;i++){
			if(checkboxObjs[i].checked && checkboxObjs[i].disabled==false){
				document.getElementById("btnSubmit").disabled=false;
				return;
			}
		}
		document.getElementById("btnSubmit").disabled=true;
	}catch(e){
		document.getElementById("btnSubmit").disabled=true;
	}
	
}
</script>
<div class="modal-dialog ms-modal-dialog" style="margin-top:50px;" >
  <div class="modal-content">
     
    <div class="modal-header">
      <button type="button" class="close" id="closeBtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title">添加项目学员</h4>
    </div>
      <form class="form-horizontal ms-form form-personal-info" method="POST" action="${ctx.host}/project-data/${project.id}/trainee-add" data-validate="true">
        
        <input type="hidden" name="_method" value="PATCH" />
        
        <input type="hidden" name="projectId" value="${project.id}" />
        
         <div class="modal-body">

			<table class="table table-hover umu-table tab-pane table-striped">
		        <thead>
		          <tr>
					<th>学员姓名</th>
					<th>学员邮箱</th>
					<th class="text-center">操作</th>
		          </tr>
		        </thead>
		        
		        <tbody>
		        	<c:forEach items="${trainees}" var="trainee" varStatus="status">
						<tr>
							<td>${trainee.name}</td>
							<td>${trainee.email}</td>
							<td>
							<input type="checkbox" name="selectedTraineeId" value = "${trainee.id}"  <c:if test="${selectedTrainees.contains(trainee)}"> checked disabled </c:if>   onChange="doChangeCheckBox();">
							</td>
						</tr>
					</c:forEach>
		        </tbody>
		        <tfoot>
		          <tr>
		            <td colspan="3" class="no-vertical-padding">
		              <div class="pull-left">
		                <jsp:include page="/WEB-INF/include/page-popup.jsp">
		                  <jsp:param name="url" value="${ctx.host}/training-admin/project-data/${project.id}/trainee-add" /> 
		                  <jsp:param name="queryString" value="${queryString}" />
		                </jsp:include>
		              </div>
		            </td>
		          </tr>
		        </tfoot>
		      </table>      
        </div>

      <div class="modal-footer">
        <button type="submit" id="btnSubmit" class="btn btn-shadow-success btn-shadow umu-btn" data-dismiss="modal" disabled>确定</button>
        <button type="button" class="btn btn-shadow-default btn-shadow umu-btn" data-dismiss="modal">取消</button>
      </div>
      </form>
    
  </div>
</div>